<template>
    <!-- 问题：我们不知道什么时候拿到的 max 是有值的，但总归有一刻，它是有值的 -->
    <!-- 我们可以使用 watch 属性监听，来监听父组件传过来的 max 值，最后监听到的肯定是一个合法的数值 -->
    <div class="mui-numbox" data-numbox-min="1">
      <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
      <input id="test" class="mui-input-numbox" type="number" 
      @change="countChanged" ref="numbox" value="1" />
      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
</template>

<script>
import mui from "../../lib/mui/js/mui.js";

export default {
    mounted() {
        mui(".mui-numbox").numbox();
    },
    methods: {
        countChanged(){
            // 文本框数据改变触发事件，将数据传递给父组件
            // console.log(this.$refs.numbox.value);
            let num = 1;
            if (this.$refs.numbox.value > this.max) {//防止用户输入的数据和我们文本框显示的数据不一致
                num = this.max
            } else {
                num = this.$refs.numbox.value;
            }
            console.log(num);
            this.$emit("getcount", parseInt(num)); 
        }
    },
    props:["max"],
    watch: {
        // 属性监听
        "max":function(newV, oldV) {/*只要 max 值改变，就会监听 */
            /* 使用 JSAPI 设置最大值 */
            mui(".mui-numbox").numbox().setOption("max", newV);
        }
    }
};
</script>

<style lang="scss" scoped>
</style>